<template>
  <Form
    ref="cloudSaleForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    :label-width="100"
    inline
  >
    <FormItem prop="ctime" style="width: 250px; margin-left: -20px" label="创建日期：">
      <DatePicker v-model="form.ctime" type="date" placeholder="请选择创建日期"></DatePicker>
    </FormItem>
    <FormItem prop="uname" style="width: 250px; margin-left: -20px" label="客户姓名：">
      <Input type="text" v-model="form.uname" placeholder="请输入客户姓名"/>
    </FormItem>
    <FormItem prop="tel" style="width: 250px; margin-left: -20px" label="客户电话：">
      <Input type="text" v-model="form.tel" placeholder="请输入客户电话"/>
    </FormItem>
    <FormItem prop="appointime" style="width: 250px; margin-left: -20px" label="预约日期：">
      <DatePicker v-model="form.appointime" type="date" placeholder="请选择预约日期"></DatePicker>
    </FormItem>
    <FormItem prop="comdate" style="width: 250px; margin-left: -20px" label="到店日期：">
      <DatePicker v-model="form.comdate" type="date" placeholder="请选择到店日期"></DatePicker>
    </FormItem>
    <FormItem prop="state" label="状态：" style="width: 230px; margin-left: -50px">
      <Select v-model="form.state" clearable>
        <Option value="all">全部</Option>
        <Option value="0">未预约</Option>
        <Option value="1">已预约</Option>
        <Option value="2">未到访</Option>
        <Option value="3">已到店</Option>
        <Option value="4">已签约</Option>
        <Option value="5">已退款</Option>
      </Select>
    </FormItem>
    <FormItem style="float: right">
      <Button @click="handleSubmit" icon="md-search" type="primary">搜索</Button>
    </FormItem>
  </Form>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'CloudSaleForm',
  props: {
    ctimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    nameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    phoneRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        ctime: '',
        uname: '',
        tel: '',
        appointime: '',
        comdate: '',
        state: 'all'
      }
    }
  },
  computed: {
    rules () {
      return {
        ctime: this.ctimeRules,
        uname: this.nameRules,
        tel: this.phoneRules,
        appointime: this.ctimeRules,
        comdate: this.ctimeRules,
        state: this.stateRules
      }
    },
    ...mapState({
      row: state => state.sale.row
    })
  },
  methods: {
    handleSubmit () {
      this.$refs.cloudSaleForm.validate(valid => {
        if (valid) {
          this.$emit('on-success-valid', {
            suname: this.row.coludname,
            ctime: this.form.ctime
              ? this.$moment(this.form.ctime).format('YYYY-MM-DD')
              : '',
            uname: this.form.uname,
            tel: this.form.tel,
            appointime: this.form.appointime
              ? this.$moment(this.form.appointime).format('YYYY-MM-DD')
              : '',
            comdate: this.form.comdate
              ? this.$moment(this.form.comdate).format('YYYY-MM-DD')
              : '',
            state:
              this.form.state && this.form.state !== 'all'
                ? parseInt(this.form.state)
                : ''
          })
        }
      })
    }
  }
}
</script>
